<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="us">
<head>
	<meta charset="utf-8">
  <title>Live chart </title>
  <meta content="Free online charts, charts, charts build, graph online, plot online, generate charts, create graph, share graph, export charts" name="keywords">
  <meta content="Free online Charts Builder based on highcharts API" name="description">
  <link href="css/style.css" rel="stylesheet"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/highcharts.js" type="text/javascript"></script>
  <script src="js/util.js" type="text/javascript"></script>
  <script>
    var params = getParams(document.location.search);
	
	var title;
	if(!params.hasOwnProperty("title")) {
		title = "GOLD Chart";
    } else {
		title = params.title;
	}
	
	var yaxis;
	if(!params.hasOwnProperty("yaxis")) {
		yaxis = "Dynamic y axis (sample label)";
    } else {
		yaxis = params.yaxis;
	}
	
	var values = [[29455,29589,28100,28470,29102,29039,28963,29155,30001,30102,29909,30555,30247,29945,30159,30165,29999,30233,29354]];
	
    if(!params.hasOwnProperty("source")) {
		if(params.hasOwnProperty("values")) {
			var values = CSVToArrayInt(params['values'], ',');
		}
    }

    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
    
        var chart;
        var i = 0;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {
    
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(); // current time
                            var y = 0;
                            if(params.hasOwnProperty("source")) {
                              $.get(params.source, function(data) {
                              y = parseInt(data);
                              series.addPoint([x, y], true, true);
                              });
                            } else {
                              y = values[0][i];
                              i = i + 1;
                              if(i >= values[0].length) {
                                i = 0;
                              }
                            }
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: title
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: yaxis
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: params.seriename,
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
    
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: 0
                        });
                    }
                    return data;
                })()
            }]
        });
    });
  </script>
</head>
<body topmargin="0" leftmargin="0">

<script>
$(document).ready(function(){
  $("#nav-one li").hover(
    function(){ $("ul", this).fadeIn("fast"); }, 
    function() { } 
  );
  if (document.all) {
    $("#nav-one li").hoverClass ("sfHover");
  }
});

$.fn.hoverClass = function(c) {
  return this.each(function(){
    $(this).hover( 
      function() { $(this).addClass(c);  },
      function() { $(this).removeClass(c); }
    );
  });
};  
</script>


<!-- -->

<div id="container"></div>


   

<script type="text/javascript">

var _gaq = _gaq || [];
var pluginUrl =
 '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-37904912-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

</body>
</html>